﻿@using BackEnd.Infrastructure;
@model BackEnd.Models.ArtistPriceManagementModel
@{
    ViewBag.Title = "Artist-Works Management";
}

<h2>Artist-Works Management</h2>
@using (Html.BeginForm())
{ 
    @Html.ValidationSummary(true, "Update works of artists was unsuccessful. Please correct the errors and try again.") 
                        
    if (ViewData["ErrorMessage"] != null)
    {
    @Html.Label(ViewData["ErrorMessage"].ToString())
    }
    <table>

        <tr>
            <td>
                <table>

                    <tr>
                        <td>
                            <span class="artist-title">Search artist</span>

                            @Html.TextBox("txtArtistLeft", "", new { id = "txtArtistLeft" })
                            @Html.HiddenFor(m => m.SelectedArtistLeftID, new { id = "hidArtistLeftID" })
                            <div id="divArtistLeftInfo">
                            </div>
                            @*@Html.AutocompleteFor(m=>m.SelectedArtistLeftID, "Autocomplete", "Artist")*@
                            @*@Html.DropDownListFor(m => m.SelectedArtistLeftID, new SelectList(Model.ListOfArtistsLeft, "ArtistId", "FullName"))*@
                            @Html.ValidationMessageFor(m => m.SelectedArtistLeftID)
                        </td>


                        <td></td>
                        <td><span class="artist-title">Search artist</span>

                            @Html.TextBox("txtArtistRight", "", new { id = "txtArtistRight" })
                            @Html.HiddenFor(m => m.SelectedArtistRightID, new { id = "hidArtistRightID" })
                            <div id="divArtistRightInfo">
                            </div>
                            @Html.ValidationMessageFor(m => m.SelectedArtistRightID)

                        </td>
                    </tr>
                    <tr>
                        <td id="listArtistWorksLeft">
                            <span id="sWorkLeftTitle" class="artist-title"></span>
                            <br />
                            @Html.ListBoxFor(m => m.SelectedPricesLeft, new MultiSelectList(Enumerable.Empty<SelectListItem>(), "ID", "ItemName"), new { id = "lbxPricesLeft", @class = "ListWorks" })
                            @Html.ValidationMessageFor(m => m.SelectedPricesLeft)
                            @Html.HiddenFor(m => m.SelectedPricesLeft, new { id = "hidPricesLeftID" })
                        </td>
                        <td>
                            <input type="button" value=">>" id="ibtnToRight" title="Add" /><br />
                            <input type="button" value="<<" id="ibtnToLeft" title="Remove" /></td>
                        <td id="listArtistWorksRight">
                            <span id="sWorkRightTitle" class="artist-title"></span>
                            <br />
                            @Html.ListBoxFor(m => m.SelectedPricesRight, new MultiSelectList(Enumerable.Empty<SelectListItem>(), "ID", "ItemName"), new { id = "lbxPricesRight", @class = "ListWorks" })
                            @Html.ValidationMessageFor(m => m.SelectedPricesRight)
                            @Html.HiddenFor(m => m.SelectedPricesRight, new { id = "hidPricesRightID" })

                        </td>

                    </tr>
                </table>




            </td>
        </tr>

        <tr>

            <td>

                <input type="submit" value="Update" onclick="PreSubmit();" />
            </td>
        </tr>
    </table>
    
}
<style>
    .ui-autocomplete-loading {
        background: white url('../images/asterik.gif') right center no-repeat;
      }
    .ui-autocomplete {
        max-height: 400px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
    }
    /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
    * html .ui-autocomplete {
        height: 400px;
    }
     
      
  
</style>
<script>
    $(document).ready(function () {
        $('#listArtistWorksLeft').hide();
        $('#listArtistWorksRight').hide();
        $("#ibtnToRight").click(function () {


            $("#lbxPricesLeft > option:selected").each(function () {
                $(this).remove().appendTo("#lbxPricesRight");
            });


        });
        $("#ibtnToLeft").click(function () {


            $("#lbxPricesRight > option:selected").each(function () {
                $(this).remove().appendTo("#lbxPricesLeft");
            });


        });

        $('#txtArtistLeft').autocomplete({
            source: '@Url.Action("Autocomplete")',
            select: function (event, ui) {
                $("#hidArtistLeftID").val(ui.item.ArtistId);
                $("#divArtistLeftInfo").html("Artist selected:<i> " + ui.item.FullName + (ui.item.Country ? ", " + ui.item.Country : "") + ", " + (ui.item.Born ? "" + ui.item.Born : "Unknown year of birth") + (ui.item.Died ? "-" + ui.item.Died : "") + "</i>");
                $("#sWorkLeftTitle").html(ui.item.FullName + "'s works:");
                LoadWorksOfArtistLeft(ui.item.ArtistId);

                return false;
            },
            style: "full",
            minLength: 3,

            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
            return $("<li>")
              .append("<a>" + "<b>" + item.FullName + "</b>" + (item.Country ? ", " + item.Country : "") + "<br>" + (item.Born ? "" + item.Born : "Unknown") + (item.Died ? "-" + item.Died : "") + "</a>")
              .appendTo(ul);
        };

        $('#txtArtistRight').autocomplete({
            source: '@Url.Action("Autocomplete")',
            select: function (event, ui) {
                $("#hidArtistRightID").val(ui.item.ArtistId);
                $("#divArtistRightInfo").html("Artist selected:<i> " + ui.item.FullName + (ui.item.Country ? ", " + ui.item.Country : "") + ", " + (ui.item.Born ? "" + ui.item.Born : "Unknown year of birth") + (ui.item.Died ? "-" + ui.item.Died : "") + "</i>");
                $("#sWorkRightTitle").html(ui.item.FullName + "'s works:");
                LoadWorksOfArtistRight(ui.item.ArtistId);

                return false;
            },
            style: "full",
            minLength: 3,

            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
            return $("<li>")
              .append("<a>" + "<b>" + item.FullName + "</b>" + (item.Country ? ", " + item.Country : "") + "<br>" + (item.Born ? "" + item.Born : "Unknown") + (item.Died ? "-" + item.Died : "") + "</a>")
              .appendTo(ul);
        };



    })
    //
            function LoadWorksOfArtistLeft(artistID) {

                if (artistID == null || artistID <= 0)
                    return;
                var URL = urlpath + 'Artist/GetWorksByArtist/' + artistID;
                $.getJSON(URL, function (data) {
                    var items = '';

                    $.each(data, function (i, vt) {
                        items += "<option value='" + vt.ID + "'>" + vt.ItemName + "</option>";
                    });
                    $('#lbxPricesLeft').html(items);
                    $('#listArtistWorksLeft').show();


                });
            }
    //
            function LoadWorksOfArtistRight(artistID) {

                if (artistID == null || artistID <= 0)
                    return;
                var URL = urlpath + 'Artist/GetWorksByArtist/' + artistID;
                $.getJSON(URL, function (data) {
                    var items = '';

                    $.each(data, function (i, vt) {
                        items += "<option value='" + vt.ID + "'>" + vt.ItemName + "</option>";
                    });
                    $('#lbxPricesRight').html(items);
                    $('#listArtistWorksRight').show();


                });
            }
    //
            function PreSubmit() {
                var leftValue = ";";
                var rightValue = ";";
                $("#lbxPricesLeft > option").each(function () {
                    leftValue += $(this).val() + ";";
                });
                $("#hidPricesLeftID").val(leftValue);

                $("#lbxPricesRight > option").each(function () {
                    rightValue += $(this).val() + ";";
                });
                $("#hidPricesRightID").val(rightValue);
            }
</script>


